<template>
  <!-- 辖区管理-详情 -->
  <public-modal
    :footer="false"
    :publicVisible="publicVisible"
    modalStyle="detailsPoliceModal"
    title="详情"
    width="500px"
    @cancel="cancel"
    @handleOk="handleOk"
  >
    <div slot="content">
      <div class="top card flex">
        <div class="info-wrap flex column justify-between">
          <div>
            <span>辖区编码：</span>
            <span class="value">{{ details.jurisdictionNo || '' }}</span>
          </div>
          <div>
            <span>辖区名称：</span>
            <span class="value">{{ details.jurisdictionName }}</span>
          </div>
          <div class="flex align-center">
            <span>区域颜色：</span>
            <div :style="{ background: details.positionColour }" class="colorBlock"></div>
          </div>
          <div>
            <span>经纬度：</span>
            <span class="value">{{ details.lng }} -- {{ details.lat }}</span>
          </div>
          <div class="flex" style="max-width: 450px">
            <span>边界坐标：</span>
            <a-tooltip placement="top">
              <template slot="title">
                <span>{{ details.areaPosition }}</span>
              </template>
              <span class="value f1 text-overflow">{{ details.areaPosition }}</span>
            </a-tooltip>
          </div>
          <div>
            <span>范围描述：</span>
            <span class="value">{{ details.scopeDescription }}</span>
          </div>
          <div>
            <span>辖区民警：</span>
            <block v-if="principalPoliceUserList.length">
              <span v-for="v of principalPoliceUserList" :key="v.id" class="value">
                {{ v.name }}
              </span>
            </block>
          </div>
          <div>
            <span>辖区责任民警：</span>
            <span class="value">{{
              (details && details.principalPoliceUser && details.principalPoliceUser.name) || ''
            }}</span>
          </div>
        </div>
      </div>
    </div>

    <div slot="footer"></div>
  </public-modal>
</template>
<script>
import publicModal from '@/components/publicModal'

export default {
  name: 'detailsPoliceModal',
  components: { publicModal },
  data() {
    return {
      publicVisible: false,
      details: {},
      principalPoliceUserList: [],
    }
  },
  methods: {
    show(records) {
      this.details = records
      this.principalPoliceUserList = this.details.principalPoliceUserList || []
      this.publicVisible = true
    },
    handleOk() {
      this.publicVisible = false
    },
    cancel() {
      this.publicVisible = false
    },
  },
}
</script>
<style lang="less" scoped>
.detailsPoliceModal {
  .top {
    // height: 2.4rem;
    padding: 0.3rem;

    .info-wrap {
      font-size: 0.16rem;
      font-weight: bold;
      div {
        margin-bottom: 10px;
      }
      span {
        font-size: 0.14rem;
        font-weight: 400;
        color: var(--theme-tab-text-color);
      }
      .value {
        font-weight: 700;
        color: var(--theme-modal-label-value-color);
      }
    }
  }

  .colorBlock {
    margin: 5px 3px 0;
    border-radius: 4px;
    width: 30px;
    height: 30px;
  }
}
</style>
